/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function(){
    
    var ds = new Ext.data.Store({
        proxy: new Ext.data.ScriptTagProxy({
            url: 'http://localhost/close2me/public/group/items/'
        }),
        reader: new Ext.data.JsonReader({
            root: 'results',
            totalProperty: 'totalCount',
            id: 'marker_id'
        }, [            
            {name: 'group_id', mapping: 'id'},                    
            {name: 'marker_id', mapping: 'marker_id'},                    
            {name: 'group_name', mapping: 'group_name'},
            {name: 'date', mapping: 'date_created'},            
            {name: 'marker_name', mapping: 'marker_name'},            
            {name: 'description', mapping: 'description'}
        ])
    });
    
    // Custom rendering Template
    var resultTpl = new Ext.XTemplate(
        '<tpl for="."><div class="search-item">',
            '<h3>{group_name}</h3>',            
            '<p>{marker_name}, Date: {date}</p>',
        '</div></tpl>'
    );
    
    var search = new Ext.form.ComboBox({
        store: ds,
        displayField:'group_name',
        typeAhead: false,
        loadingText: 'Searching...',
        width: 570,
        pageSize:10,
        minChars:2,
        hideTrigger:true,
        tpl: resultTpl,
        applyTo: 'search',
        itemSelector: 'div.search-item',
        onSelect: function(record){ // override default onSelect to do redirect
            load(record.group_id);
            focus(false);  
            this.setValue(record.data[this.valueField || this.displayField]);
            this.collapse();                       
        } 
    });
    
});